<#assign base = request.contextPath />
<!DOCTYPE html>
<html lang="en">
<head>
    <base id="base" href="${base}">
    <meta name="viewport"
          content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=0.3"/>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_379791_2cyjes73tt5fusor.css">
    <link href="js/main.js">
    <title>等级祥情</title>
</head>
<body>
    <div class="header-area">
        <img src="/images/content-1.png" style="position: absolute; height: 16em;width: 16em;left: 27%;top: -18px;z-index: 99;">
        <div class="content">
            <img src="/images/zhuomian.jpg">
            <p style="margin-top: -10px; z-index: 999;position: absolute;left: 45.5%;z-index: 999; color: rgba(255,255,255,0.8);">Lv6</p>
            <p class="p-name">这是我的地盘</p>
            <p>还需要<span>100</span>经验值升到<span>Lv7</span></p>
            <div class="content-experience">
                <div  id="bar"class="bar">
                    <div id="experience" class="experience"></div>
                </div>
                <span class="iconfont icon-dengji content-grade">Lv1</span><span class="content-percentage iconfont">50%</span>
             </div>
        </div>

    </div>
    <div class="grade-area">
        <h3>--&nbsp&nbsp等级特权&nbsp&nbsp--</h3>
            <div class="grade-content">

                <div class="content-top">
                   <div class="module">
                       <div class="img-out a_gradient">
                       <img src="/images/icon/huanying.png">
                       </div>
                       <p>欢迎进场</p>
                       <span>LV20开启</span>
                   </div>
                    <div class="module">
                        <div class="img-out b_gradient">
                        <img src="/images/icon/gift.png">
                        </div>
                        <p>道具礼包</p>
                        <span>LV40开启</span>
                    </div>
                    <div class="module">
                        <div class="img-out c_gradient">
                            <img src="/images/icon/baoxiang.png">
                        </div>
                        <p>神秘宝箱</p>
                        <span>LV60开启</span>
                    </div>
                </div>
                <div class="content-bottom">
                        <div class="module">
                            <div class="img-out d_gradient">
                                <img src="/images/icon/baoshijie.png">
                            </div>
                            <p>荣耀坐骑</p>
                            <span>LV80开启</span>
                        </div>
                        <div class="module">
                            <div class="img-out e_gradient">
                                <img src="/images/icon/che.png">
                            </div>
                            <p>超管车队</p>
                            <span>LV100开启</span>
                        </div>
                        <div class="module">
                            <div class="img-out f_gradient iconfont icon-huangguan">

                            </div>
                            <p>欢定制进场效果</p>
                            <span>LV120开启</span>
                        </div>
                    </div>
                <p>更多特权 &nbsp&nbsp&nbsp&nbsp尽请期待</p>
            </div>
    </div>
    <div class="upgrade-area">
        <h3>--&nbsp快速升级小提示&nbsp--</h3>
        <div class="upgrade-content">
            <ul>
                <li>
                    <div class="icon iconfont icon-liwu1"></div>
                    <div class="upgrade-text">
                        <div>赠送礼品</div>
                        <span>礼物刷起来，经验飞快涨</span>
                    </div>
                </li>
                <li>
                    <div class="icon iconfont icon-renwu"></div>
                    <div class="upgrade-text">
                        <div>去做任务</div>
                        <span>去做任务，经验呼呼的</span>
                    </div>
                </li>
                <li>
                    <div class="icon iconfont icon-qiandao"></div>
                    <div class="upgrade-text">
                        <div>天天签到</div>
                        <span>经验再少也是经验啊</span>
                    </div>
                </li>
                <li>
                    <div class="icon iconfont icon-dingzhi1"></div>
                    <div class="upgrade-text">
                        <div>定制礼品</div>
                        <span>定制的最牛逼</span>
                    </div>
                </li>
                <li>
                    <div class="icon iconfont icon-zuanshi"></div>
                    <div class="upgrade-text">
                        <div>成为贵族</div>
                        <span>我是贵族，还怕没经验</span>
                    </div>
                </li>
                <li>
                    <div class="icon iconfont icon-dingzhijiaoyi"></div>
                    <div class="upgrade-text">
                        <div>定制法拉利</div>
                        <span>赠送法拉利,经验飞快涨</span>
                    </div>
                </li>
                <li>
                    <div class="icon iconfont icon-youting"></div>
                    <div class="upgrade-text">
                        <div >赠送游艇</div>
                        <span>听说送法拉利挺厉害</span>
                    </div>
                </li>
                <li>
                    <div class="icon last-none iconfont icon-fenxiang"></div>
                    <div class="upgrade-text last-none">
                        <div>分享直播</div>
                        <span>分享也能涨经验啊</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>

<script>
    var total = 100; //总数
    var curN = 50; //当前值
    function show()
    {
        var o = document.getElementById("experience");
        o.style.width = ((curN / total) * 200) + 'px'; //200是外框的宽度
    }
    show();
</script>
</body>
</html>